<template>
  <a-select
    ref="select"
    v-model:value="roleId"
    style="width: 200px"
    @select="handleSelect"
    @change="handleChange"
  >
    <a-select-option
      v-for="(item, idx) in roleOpts"
      :key="idx"
      :node="item"
      :value="item.roleId"
      >{{ item.roleName }}</a-select-option
    >
  </a-select>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineEmits,
  watch,
} from "vue";
import ResultEnum from "@/config/ResultEnum";
import { message } from "ant-design-vue";
import { copyObjVal } from "@/utils/common";
import { PlusOutlined } from "@ant-design/icons-vue";
import request from "@/request";

export default defineComponent({
  components: {
    PlusOutlined,
  },
  props: {
    version: {
      type: String,
    },
    roleId: {
      type: String,
    },
  },
  setup(props, context) {
    watch(
      () => props.version,
      (newVal: any, oldVal: any) => {
        loadData();
      }
    );

    watch(
      () => props.roleId,
      (newVal: any, oldVal: any) => {
        roleId.value = newVal;
      }
    );

    const roleId = ref("");
    const roleOpts = ref([] as any);
    const currNode = ref({} as any);

    const init = (val: string) => {
      roleId.value = val;
      currNode.value.roleId = val;
    };

    const getData = () => {
      return currNode.value.roleId == null || currNode.value.roleId == undefined
        ? null
        : currNode.value;
    };

    onMounted(() => {
      loadData();
    });

    const loadData = () => {
      request({
        url: "/role/all",
        method: "get",
      }).then((res: any) => {
        if (res.code == ResultEnum.SUCCESS_CODE) {
          roleOpts.value = res.result;
        } else {
          message.error(res.message);
        }
      });
    };

    const handleSelect = (value: any, option: any) => {
      currNode.value = option.node;
    };

    const handleChange = (value: any, option: any) => {
      console.log(option.node);
    };

    return {
      init,
      getData,
      roleId,
      roleOpts,
      handleChange,
      handleSelect,
    };
  },
});
</script>
